<template>
  <view class="user-stats-enhanced">
    <view class="stat-card stat-days">
      <view class="stat-gradient gradient-blue"></view>
      <text class="stat-icon-large">📅</text>
      <text class="stat-number-large">{{ userStats.loginDays }}</text>
      <text class="stat-label-new">登录天数</text>
    </view>
    <view class="stat-card stat-backpack" @click="handleBackpackClick">
      <view class="stat-gradient gradient-purple"></view>
      <text class="stat-icon-large">🎒</text>
      <text class="stat-label-new">我的背包</text>
      <view class="stat-arrow-icon">→</view>
    </view>
    <view class="stat-card stat-points" @click="handlePointsClick">
      <view class="stat-gradient gradient-gold"></view>
      <text class="stat-icon-large">💰</text>
      <text class="stat-number-large">{{ userPoints }}</text>
      <text class="stat-label-new">积分余额</text>
      <view class="stat-arrow-icon">→</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'UserStatsCards',
  props: {
    userStats: {
      type: Object,
      required: true
    },
    userPoints: {
      type: Number,
      default: 0
    }
  },
  methods: {
    handleBackpackClick() {
      this.$emit('backpack-click')
    },
    handlePointsClick() {
      this.$emit('points-click')
    }
  }
}
</script>

<style scoped>
/* ========== 用户统计卡片 - 增强版 ========== */
.user-stats-enhanced {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16rpx;
  margin-bottom: 28rpx;
}

.stat-card {
  position: relative;
  background: white;
  border-radius: 20rpx;
  padding: 24rpx 16rpx;
  text-align: center;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card:active {
  transform: translateY(-4rpx);
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.12);
}

.stat-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60rpx;
  opacity: 0.12;
}

.stat-gradient.gradient-blue {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-gradient.gradient-purple {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-gradient.gradient-gold {
  background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
}

.stat-icon-large {
  font-size: 42rpx;
  display: block;
  margin-bottom: 10rpx;
  filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
  animation: icon-bounce 2s ease-in-out infinite;
}

@keyframes icon-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4rpx); }
}

.stat-card:nth-child(1) .stat-icon-large { animation-delay: 0s; }
.stat-card:nth-child(2) .stat-icon-large { animation-delay: 0.2s; }
.stat-card:nth-child(3) .stat-icon-large { animation-delay: 0.4s; }

.stat-number-large {
  font-size: 32rpx;
  font-weight: bold;
  color: #1f2937;
  display: block;
  margin-bottom: 6rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label-new {
  font-size: 22rpx;
  color: #6b7280;
  font-weight: 500;
}

.stat-arrow-icon {
  position: absolute;
  top: 12rpx;
  right: 12rpx;
  width: 32rpx;
  height: 32rpx;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18rpx;
  color: #667eea;
}
</style>

